<template>
	<view class="my_minHeight">
		<z-paging ref="paging" auto v-model="listData" @query="getData">
			<view class="clientInfo_container">
				<view class="content">
					<view class="d-flex flex-column j-sb content_item w100p mb15" v-for="item in listData" :key="item.orderCode">
						<view class="d-flex a-center mb15 itemRow">
							<!-- <view class="line mr10"></view> -->
							<view class="title">券码：{{item.couponCode}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15 itemRow">
							<view class="title_item">领用时间</view>
							<view class="value_item">{{item.createTime || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15 itemRow">
							<view class="title_item">核销状态</view>
							<view class="value_item">
								<u-tag plain size="mini" :text="item.couponStatus==0?'未核销':'已核销'"
									:type="item.couponStatus==0?'error':'success'"></u-tag>
							</view>
						</view>
						<view class="d-flex a-center j-sb mb15 itemRow" v-if="item.updateTime">
							<view class="title_item">核销时间</view>
							<view class="value_item">{{item.updateTime || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15 itemRow" v-if="item.customerName">
							<view class="title_item">核销客户</view>
							<view class="value_item">{{item.customerName || praseStrEmpty}}</view>
						</view>
					</view>

				</view>
			</view>
			<!-- <view slot="bottom">
				<view class="d-flex j-center a-center">
					<view class="posi_fixd">
						<u-button type="success" text="核销" @click="openHxPopup"></u-button>
					</view>
				</view>
			</view> -->
		</z-paging>
		<view>
			<view class="posi_fixd2">
				<!-- <u-button type="success" text="核销" @click="openHxPopup"></u-button> -->
				<view style="background-color: #fff;border-radius: 50%;" @click="openHxPopup">
					<u-icon name="plus-circle-fill" color="#2979ff" size="48"></u-icon>
				</view>
			</view>
		</view>

		<u-modal :show="showPopup" :showConfirmButton="true" :showCancelButton="true" @cancel="showPopup = false"
			@confirm="saveDonfirm">
			<view class="slot-content w100p">
				<view class="w100p">
					<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
						<u-form-item label="券码" prop="couponCode" borderBottom>
							<u--input v-model="model.couponCode" border="none" placeholder="请填写券码"></u--input>
						</u-form-item>
						<u-form-item label="客户" prop="customerName" borderBottom @click="show = true">
							<u--input v-model="model.customerName" disabled disabledColor="#ffffff" placeholder="请选择客户"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</u-modal>
		<u-picker :show="show" :columns="columns" keyName="customerName" @cancel="show = false"
			@confirm="confirm"></u-picker>

		<u-toast ref="uToast" duration="1000"></u-toast>
	</view>
</template>

<script>
	import {
		queryUsedCouponPage,
		queryListByCoffee,
		saveWriteOff
	} from "@/api/index.js"

	export default {
		components: {},
		data() {
			return {
				userInfo: uni.getStorageSync('housekeeperInfo'),
				listData: [],
				showPopup: false,
				model: {
					couponCode: "",
					customerName: "",
					customerCode: ""
				},
				rules: {
					'couponCode': {
						type: 'string',
						required: true,
						message: '请填写券码',
						trigger: ['blur', 'change']
					},
					'customerName': {
						type: 'string',
						required: true,
						message: '请选择客户',
						trigger: ['blur', 'change']
					}
				},
				show: false,
				columns: [],
			};
		},
		onLoad() {},
		onShow() {
			queryListByCoffee().then(res => {
				this.columns[0] = res.object
			})
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},

		methods: {
			getData(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				queryUsedCouponPage({
					pageIndex: pageNo,
					pageSize: pageSize,
					couponStatus: 0,
				}).then(res => {
					this.$refs.paging.complete(res.object.data);
					uni.hideLoading()
				})
			},

			openHxPopup() {
				this.showPopup = true
			},

			confirm(e) {
				this.model.customerCode = e.value[0].customerCode
				this.model.customerName = e.value[0].customerName
				this.$refs.uForm.validateField('customerName')
				this.show = false
			},

			saveDonfirm(e) {
				const that = this
				that.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					saveWriteOff({
						couponCode: that.model.couponCode,
						customerCode: that.model.customerCode
					}).then(res => {
						if (res.status == '200') {
							that.$refs.paging.reload()
							uni.hideLoading()
							that.showPopup = false
							that.$refs.uToast.show({
								type: "success",
								duration: "1000",
								message: res.message,
							})
						}
					})
				}).catch(errors => {
					console.log('校验失败');
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.my_minHeight {
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
	}

	.clientInfo_container {
		box-sizing: border-box;
		padding: 30rpx 28rpx;

		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #fff;
				padding: 40rpx;

				.itemRow:last-child {
					margin-bottom: 0 !important;
				}

				.title {
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

	}

	.posi_fixd {
		width: 70%;
	}

	.posi_fixd2 {
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
	}
</style>